<template>
   <div>
    <MyHeader title="LEMON" color='yellow' bgc="green" ></MyHeader>
    <div class="main">
      //MyGoods里面只对一条数据渲染，所以遍历数据，多次调用MyGoods组件
      <MyGoods v-for="item in list" :key='item.id' :good='item'></MyGoods>
    </div>
    <MyFooter :list='list'></MyFooter>
  </div>
</template>

<script>
//引入各个组件
import MyHeader from './components/MyHeader'//头部组件
import MyGoods from './components/MyGoods'//商品组件
import MyFooter from './components/MyFooter'//底部组件
export default {
  components: {
    MyHeader,  //注册头部
    MyGoods,  //注册商品
    MyFooter  //注册底部
  },
  //axios获取数据库数据
  created() {
    //不必再次引入axios变量，直接使用全局属性$axios 
    this.$axios({
      url:'/api/cart',
    }).then(res => {
      console.log(res)
      this.list = res.data.list //把获取的商品数据赋给list
    }).catch(err => {
      console.log(err)
    })
  },
  data(){
    return{
      list:[] //商品的所有数据
    }}
}
</script>

<style>
  .main{
    padding-top: 45px;
    padding-bottom: 50px;
  }
</style>